import React, { useRef, useEffect, useState, useImperativeHandle } from 'react'
import { Path } from '@config/path'
import './phone.scss'
import { Sketch } from '@components/Sketch/sketch'
import { LOAD_STATE } from '@util/state.js'

export const Phone = React.memo(
    React.forwardRef((props, refP) => {

        const cmpStr = props.currentRouter.slice(props.currentRouter.lastIndexOf("/") + 1)
        const [ready, setReady] = useState(LOAD_STATE.LOADING)
        const [drag, setDrag] = useState(false)
        const [diff, setDiff] = useState({
            diffX: 0,
            diffY: 0
        })

        const headerHeight = useRef(44)
        const phone = useRef(null)

        useImperativeHandle(refP, () => ({
            getPhone: () => phone
        }))        

        const handleMouseDown = e => {
            e.persist()
            if(drag) return
            const phoneStyle = document.defaultView.getComputedStyle(phone.current, null)
            setDrag(() => true)
            setDiff(() => ({
                diffX: e.clientX - parseInt(phoneStyle.left),
                diffY: e.clientY - parseInt(phoneStyle.top)
            }))
        }

        useEffect(() => {
            setReady(() => LOAD_STATE.LOADING)
        }, [props.currentRouter])

        useEffect(() => {
            if(drag) {
                document.addEventListener('mousemove', handleMouseMove)
                document.addEventListener('mouseup', handleMouseUp)
            }
            return () => {
                document.removeEventListener('mousemove', handleMouseMove)
                document.removeEventListener('mouseup', handleMouseUp)
            }
        }, [drag])

        useEffect(() => {
            window.addEventListener('message', getMsg)            
            return () => {
                window.removeEventListener('message', getMsg)
            }
        }, [])

        const getMsg = e => {
            const { load } = e.data
            load && setReady(() => LOAD_STATE.SUCCESS)
        }

        const handleMouseMove = e => {
            if(!drag) {
                return
            }
            phone.current.style.left = `${e.clientX - diff.diffX}px` 
            phone.current.style.top = `${e.clientY - diff.diffY}px` 
        }

        const handleMouseUp = e => {
            setDrag(() => false)
            let style = document.defaultView.getComputedStyle(phone.current, null)
            props.setPosition({
                x: style.left,
                y: style.top
            })
        }

        // console.log(cmpStr)

        return  <div 
                    ref={phone} 
                    className="phone_wrapper" 
                >
                    <div ref={refP} onMouseDown={handleMouseDown} className="phone_header" style={{height: headerHeight.current + 'px'}}>
                        <div className="left_tab"><div></div></div>
                        <div className="mid_tab"><div></div></div>
                        <div className="right_tab"><div></div></div>
                    </div>
                    {
                        props.animateReady &&
                            <Sketch
                                mask={Mask}
                                show={ready}
                                className="test"
                            >
                                <div style={{width: '375px', height: '623px'}}>
                                    <iframe
                                        id="phone"
                                        style={{
                                            pointerEvents: drag ? 'none' : '',
                                            width: `${props.activePhone.width}px`,
                                            height: `${props.activePhone.height - headerHeight.current}px`
                                        }}
                                        className="phone"
                                        src={`http://localhost:3000/#/ararin-components-mobile/phone/${cmpStr}`}
                                    />
                                </div>
                            </Sketch>
                    }
                </div>
        }
        
    )
)

const Mask = () => <div className="sketch_mask">
                        <div className="box">
                            <div className="loading"></div>
                        </div>
                    </div>